```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTTP协议详解 - 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-bg {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .transition-all {
            transition: all 0.3s ease;
        }
        .drop-cap::first-letter {
            font-size: 3.5em;
            float: left;
            line-height: 0.8;
            margin-right: 0.1em;
            margin-top: 0.1em;
            color: #6e8efb;
            font-weight: 700;
        }
        .code-block {
            font-family: 'Courier New', Courier, monospace;
            background-color: #f8f9fa;
            border-left: 4px solid #6e8efb;
        }
        .status-code-1xx { background-color: #d1ecf1; color: #0c5460; }
        .status-code-2xx { background-color: #d4edda; color: #155724; }
        .status-code-3xx { background-color: #fff3cd; color: #856404; }
        .status-code-4xx { background-color: #f8d7da; color: #721c24; }
        .status-code-5xx { background-color: #ffeef0; color: #d73a49; }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-5xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6">HTTP协议核心解析</h1>
            <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto leading-relaxed">
                深入理解Web通信的基石：HTTP请求与响应的完整架构
            </p>
            <div class="flex justify-center space-x-4">
                <a href="#request" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-indigo-50 transition-all">
                    <i class="fas fa-paper-plane mr-2"></i>请求结构
                </a>
                <a href="#response" class="bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-800 transition-all">
                    <i class="fas fa-reply mr-2"></i>响应结构
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Introduction -->
        <section class="mb-16">
            <p class="drop-cap text-lg text-gray-700 mb-6">
                HTTP（超文本传输协议）是现代Web通信的基础协议，它定义了客户端与服务器之间交换信息的格式和规则。理解HTTP协议的组成部分对于Web开发至关重要。
            </p>
            <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
                <div class="md:flex">
                    <div class="p-8">
                        <div class="uppercase tracking-wide text-sm text-indigo-600 font-semibold">协议概览</div>
                        <p class="mt-2 text-gray-600">
                            HTTP协议由请求和响应两部分组成，每个部分都有特定的结构。此外，协议还定义了请求方法、状态码、协议版本和头部字段等重要概念，共同构成了Web通信的基础框架。
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTTP Request Section -->
        <section id="request" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-full mr-4">
                    <i class="fas fa-paper-plane text-indigo-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP请求结构</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <!-- Request Line Card -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition-all">
                    <div class="bg-indigo-600 px-6 py-4">
                        <h3 class="text-white text-xl font-semibold">请求行 (Request Line)</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">
                            请求行包含三个部分：请求方法、请求目标和协议版本。
                        </p>
                        <div class="code-block p-4 rounded mb-4">
                            <code>GET /index.html HTTP/1.1</code>
                        </div>
                        <ul class="space-y-2 text-gray-600">
                            <li><span class="font-medium">GET</span> - 请求方法</li>
                            <li><span class="font-medium">/index.html</span> - 请求目标（资源路径）</li>
                            <li><span class="font-medium">HTTP/1.1</span> - HTTP协议版本</li>
                        </ul>
                    </div>
                </div>

                <!-- Request Headers Card -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition-all">
                    <div class="bg-indigo-600 px-6 py-4">
                        <h3 class="text-white text-xl font-semibold">请求头 (Request Headers)</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">
                            包含有关客户端、请求和服务器的附加信息。
                        </p>
                        <div class="code-block p-4 rounded mb-4">
                            <code class="block">Host: www.example.com</code>
                            <code class="block">User-Agent: Mozilla/5.0</code>
                            <code class="block">Accept: text/html</code>
                        </div>
                        <p class="text-gray-600">
                            每个请求头由头字段名和头字段值组成，用冒号分隔。
                        </p>
                    </div>
                </div>
            </div>

            <!-- Request Body Card -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition-all mb-8">
                <div class="bg-indigo-600 px-6 py-4">
                    <h3 class="text-white text-xl font-semibold">请求体 (Request Body)</h3>
                </div>
                <div class="p-6">
                    <p class="text-gray-600">
                        请求体是可选部分，用于发送请求数据（例如POST请求中的表单数据）。对于GET请求，通常没有请求体。
                    </p>
                    <div class="code-block p-4 rounded mt-4">
                        <code>username=johndoe&password=123456</code>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTTP Response Section -->
        <section id="response" class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-green-100 p-3 rounded-full mr-4">
                    <i class="fas fa-reply text-green-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP响应结构</h2>
            </div>

            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <!-- Status Line Card -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition-all">
                    <div class="bg-green-600 px-6 py-4">
                        <h3 class="text-white text-xl font-semibold">状态行 (Status Line)</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">
                            状态行包含协议版本、状态码和状态描述。
                        </p>
                        <div class="code-block p-4 rounded mb-4">
                            <code>HTTP/1.1 200 OK</code>
                        </div>
                        <ul class="space-y-2 text-gray-600">
                            <li><span class="font-medium">HTTP/1.1</span> - HTTP协议版本</li>
                            <li><span class="font-medium">200</span> - 状态码（表示请求成功）</li>
                            <li><span class="font-medium">OK</span> - 状态描述（对状态码的解释）</li>
                        </ul>
                    </div>
                </div>

                <!-- Response Headers Card -->
                <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition-all">
                    <div class="bg-green-600 px-6 py-4">
                        <h3 class="text-white text-xl font-semibold">响应头 (Response Headers)</h3>
                    </div>
                    <div class="p-6">
                        <p class="text-gray-600 mb-4">
                            包含有关服务器、响应和客户端的附加信息。
                        </p>
                        <div class="code-block p-4 rounded mb-4">
                            <code class="block">Content-Type: text/html</code>
                            <code class="block">Content-Length: 1234</code>
                            <code class="block">Set-Cookie: sessionid=12345; path=/</code>
                        </div>
                        <p class="text-gray-600">
                            每个响应头由头字段名和头字段值组成，用冒号分隔。
                        </p>
                    </div>
                </div>
            </div>

            <!-- Response Body Card -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden card-hover transition-all mb-8">
                <div class="bg-green-600 px-6 py-4">
                    <h3 class="text-white text-xl font-semibold">响应体 (Response Body)</h3>
                </div>
                <div class="p-6">
                    <p class="text-gray-600">
                        响应体是服务器返回的实际数据内容，可以是HTML、JSON、图像等格式。
                    </p>
                    <div class="code-block p-4 rounded mt-4">
                        <code class="block">&lt;!DOCTYPE html&gt;</code>
                        <code class="block">&lt;html&gt;</code>
                        <code class="block">&lt;head&gt;&lt;title&gt;Example&lt;/title&gt;&lt;/head&gt;</code>
                        <code class="block">&lt;body&gt;&lt;h1&gt;Hello World&lt;/h1&gt;&lt;/body&gt;</code>
                        <code class="block">&lt;/html&gt;</code>
                    </div>
                </div>
            </div>
        </section>

        <!-- HTTP Methods Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-purple-100 p-3 rounded-full mr-4">
                    <i class="fas fa-exchange-alt text-purple-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP请求方法</h2>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <div class="text-purple-600 text-2xl mb-3">
                        <i class="fas fa-download"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">GET</h3>
                    <p class="text-gray-600">请求指定的资源，只用于获取数据。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <div class="text-purple-600 text-2xl mb-3">
                        <i class="fas fa-upload"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">POST</h3>
                    <p class="text-gray-600">向指定资源提交数据，通常用于创建新资源。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <div class="text-purple-600 text-2xl mb-3">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">PUT</h3>
                    <p class="text-gray-600">替换目标资源的所有当前表示。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <div class="text-purple-600 text-2xl mb-3">
                        <i class="fas fa-trash-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">DELETE</h3>
                    <p class="text-gray-600">删除指定的资源。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <div class="text-purple-600 text-2xl mb-3">
                        <i class="fas fa-heading"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">HEAD</h3>
                    <p class="text-gray-600">获取与GET相同的响应头，但没有响应体。</p>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <div class="text-purple-600 text-2xl mb-3">
                        <i class="fas fa-cog"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-2">OPTIONS</h3>
                    <p class="text-gray-600">描述目标资源的通信选项。</p>
                </div>
            </div>
        </section>

        <!-- HTTP Status Codes Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-yellow-100 p-3 rounded-full mr-4">
                    <i class="fas fa-code text-yellow-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP状态码</h2>
            </div>

            <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
                <div class="status-code-1xx p-4 rounded-lg text-center">
                    <h3 class="font-bold mb-2">1xx</h3>
                    <p>信息性状态码</p>
                    <p class="text-sm mt-1">100 Continue</p>
                </div>
                <div class="status-code-2xx p-4 rounded-lg text-center">
                    <h3 class="font-bold mb-2">2xx</h3>
                    <p>成功状态码</p>
                    <p class="text-sm mt-1">200 OK, 201 Created</p>
                </div>
                <div class="status-code-3xx p-4 rounded-lg text-center">
                    <h3 class="font-bold mb-2">3xx</h3>
                    <p>重定向状态码</p>
                    <p class="text-sm mt-1">301 Moved Permanently</p>
                </div>
                <div class="status-code-4xx p-4 rounded-lg text-center">
                    <h3 class="font-bold mb-2">4xx</h3>
                    <p>客户端错误</p>
                    <p class="text-sm mt-1">404 Not Found</p>
                </div>
                <div class="status-code-5xx p-4 rounded-lg text-center">
                    <h3 class="font-bold mb-2">5xx</h3>
                    <p>服务器错误</p>
                    <p class="text-sm mt-1">500 Internal Server Error</p>
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态码</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">含义</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap font-medium">200</td>
                                <td class="px-6 py-4 whitespace-nowrap">OK</td>
                                <td class="px-6 py-4">请求成功</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap font-medium">301</td>
                                <td class="px-6 py-4 whitespace-nowrap">Moved Permanently</td>
                                <td class="px-6 py-4">资源已永久移动</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap font-medium">400</td>
                                <td class="px-6 py-4 whitespace-nowrap">Bad Request</td>
                                <td class="px-6 py-4">客户端请求有语法错误</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap font-medium">404</td>
                                <td class="px-6 py-4 whitespace-nowrap">Not Found</td>
                                <td class="px-6 py-4">请求资源不存在</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap font-medium">500</td>
                                <td class="px-6 py-4 whitespace-nowrap">Internal Server Error</td>
                                <td class="px-6 py-4">服务器内部错误</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- HTTP Versions Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-red-100 p-3 rounded-full mr-4">
                    <i class="fas fa-history text-red-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP协议版本</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-6">
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <h3 class="text-xl font-semibold mb-3 text-red-600">HTTP/1.0</h3>
                    <p class="text-gray-600 mb-4">早期版本，定义了基础的HTTP协议。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>基础请求/响应模型</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-times-circle text-red-500 mr-2 mt-1"></i>
                            <span>每次请求需要新建连接</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <h3 class="text-xl font-semibold mb-3 text-red-600">HTTP/1.1</h3>
                    <p class="text-gray-600 mb-4">当前主流版本，引入了多项改进。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>持久连接（Keep-Alive）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>管道化（Pipelining）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>分块传输编码</span>
                        </li>
                    </ul>
                </div>
                <div class="bg-white p-6 rounded-lg shadow-md card-hover transition-all">
                    <h3 class="text-xl font-semibold mb-3 text-red-600">HTTP/2 & HTTP/3</h3>
                    <p class="text-gray-600 mb-4">新一代协议，性能显著提升。</p>
                    <ul class="space-y-2 text-gray-600 text-sm">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>多路复用（HTTP/2）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>头部压缩（HTTP/2）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mr-2 mt-1"></i>
                            <span>基于QUIC协议（HTTP/3）</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- HTTP Headers Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-blue-100 p-3 rounded-full mr-4">
                    <i class="fas fa-tags text-blue-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP头部字段</h2>
            </div>

            <div class="bg-white rounded-lg shadow-md overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-blue-50">
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-500 uppercase tracking-wider">头部字段</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-500 uppercase tracking-wider">描述</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-blue-500 uppercase tracking-wider">示例</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap font-medium">Content-Type</td>
                                <td class="px-6 py-4">指定消息体的媒体类型</td>
                                <td class="px-6 py-4 whitespace-nowrap">text/html; charset=UTF-8</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap font-medium">Content-Length</td>
                                <td class="px-6 py-4">指定消息体的长度</td>
                                <td class="px-6 py-4 whitespace-nowrap">1234</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap font-medium">Authorization</td>
                                <td class="px-6 py-4">用于身份验证</td>
                                <td class="px-6 py-4 whitespace-nowrap">Bearer abc123</td>
                            </tr>
                            <tr class="bg-gray-50">
                                <td class="px-6 py-4 whitespace-nowrap font-medium">Cookie</td>
                                <td class="px-6 py-4">客户端发送的存储在浏览器中的数据</td>
                                <td class="px-6 py-4 whitespace-nowrap">sessionid=abc123</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap font-medium">Set-Cookie</td>
                                <td class="px-6 py-4">服务器设置的客户端存储的数据</td>
                                <td class="px-6 py-4 whitespace-nowrap">sessionid=abc123; Path=/</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </section>

        <!-- Visualization Section -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-teal-100 p-3 rounded-full mr-4">
                    <i class="fas fa-project-diagram text-teal-600 text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">HTTP协议关系图</h2>
            </div>

            <div class="bg-white p-6 rounded-lg shadow-md">
                <div class="mermaid">
                    graph TD
                        A[HTTP协议] --> B[请求]
                        A --> C[响应]
                        
                        B --> B1[请求行]
                        B --> B2[请求头]
                        B --> B3[请求体]
                        
                        C --> C1[状态行]
                        C --> C2[响应头]
                        C --> C3[响应体]
                        
                        B1 -->|包含| B11[方法]
                        B1 -->|包含| B12[URI]
                        B1 -->|包含| B13[版本]
                        
                        C1 -->|包含| C11[版本]
                        C1 -->|包含| C12[状态码]
                        C1 -->|包含| C13[状态文本]
                        
                        A --> D[方法]
                        A --> E[状态码]
                        A --> F[头部字段]
                        A --> G[版本]
                        
                        D --> D1[GET]
                        D --> D2[POST]
                        D --> D3[PUT]
                        D --> D4[DELETE]
                        D --> D5[HEAD]
                        D --> D6[OPTIONS]
                        
                        E --> E1[1xx: 信息]
                        E --> E2[2xx: 成功]
                        E --> E3[3xx: 重定向]
                        E --> E4[4xx: 客户端错误]
                        E --> E5[5xx: 服务器错误]
                        
                        G --> G1[HTTP/1.0]
                        G --> G2[HTTP/1.1]
                        G --> G3[HTTP/2]
                        G --> G4[HTTP/3]
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-white py-8">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-semibold">技术小馆</h3>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-300 hover:text-white transition-colors">
                        <i class="fas fa-link mr-2"></i>http://www.yuque.com/jtostring
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```